package com.example.myapplication.ui.components


import android.widget.VideoView
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.relocation.bringIntoViewResponder
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.layoutId
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.ConstraintSet
import androidx.constraintlayout.compose.Dimension
import androidx.constraintlayout.compose.layoutId
import coil.compose.AsyncImage
import com.example.myapplication.model.entity.VideoEntity

@Composable
fun VideoItem(modifier: Modifier = Modifier, videoEntity: VideoEntity) {

    var constraintSet = ConstraintSet {
        // 创建引用
        val cover = createRefFor("cover")
        val title = createRefFor("title")
        val type = createRefFor("type")
        val duration = createRefFor("duration")
        val divider = createRefFor("divider")

        constrain(cover) {
            start.linkTo(parent.start)
            // 相对于父元素垂直居中
            centerVerticallyTo(parent)
            width = Dimension.value(115.5.dp)
        }

        constrain(title) {
            start.linkTo(cover.end, margin = 8.dp)
            end.linkTo(parent.end)
            // Dimension.fillToConstraints为宽度自适应,可解决start失效问题
            width = Dimension.fillToConstraints
        }

        constrain(type) {
            start.linkTo(cover.end, margin = 8.dp)
            bottom.linkTo(parent.bottom)
        }

        constrain(duration) {
            end.linkTo(parent.end)
            bottom.linkTo(parent.bottom)
        }

        constrain(divider) {
            bottom.linkTo(parent.bottom, margin = (-8).dp)
        }

    }

    ConstraintLayout(constraintSet, modifier = modifier
        .fillMaxWidth()
        .padding(8.dp)) {
        AsyncImage(
            model = videoEntity.imageUrl,
            contentDescription = null,
            modifier = Modifier
                .layoutId("cover")
                .aspectRatio(16 / 9f)
                .clip(RoundedCornerShape(6.dp)),
            contentScale = ContentScale.Crop
        )
        Text(
            text = videoEntity.title,
            fontSize = 16.sp,
            maxLines = 2,
            color = Color(0xFF666666),
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.layoutId("title")
        )
        Text(
            text = videoEntity.type,
            fontSize = 10.sp,
            maxLines = 1,
            color = Color(0xFF999999),
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.layoutId("type")
        )
        Text(
            text = "时长: ${videoEntity.duration}",
            fontSize = 10.sp,
            maxLines = 1,
            color = Color(0xFF999999),
            overflow = TextOverflow.Ellipsis,
            modifier = Modifier.layoutId("duration")
        )

        Divider(modifier = Modifier
            .layoutId("divider"))
    }
}


